<template>
  <div class="process-template-management">
    <div>
      原始组件：
      <test-input v-model="a" @change="changeFn"></test-input>
    </div>
    <div>
      二开组件：
      <extend-test-input v-model="a" additional="333" @click="changeFn">防抖</extend-test-input>
    </div>
    <div>
      扩展重写组件：
      <extend-test-input2 v-model="a" tag="e3" name="kk" @change="changeFn"></extend-test-input2>
    </div>
  </div>
</template>

<script setup>
import ExtendTestInput from '@/tysrc/components/extend-test-input/index.vue';
import ExtendTestInput2 from '@/tysrc/components/extend-test-input/index2.vue';
// 同步组件
const TestInput = tyRoot.tyGetMixinResource('rpm/components/test-input/index.vue');
const a = ref('');
const changeFn = val => {
  alert(val);
};
</script>
<style lang="scss" scoped>
.process-template-management {
  height: calc(100% - 84px);

  .process-template-management-toolbar {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
  }

  .toolbar-left {
    display: flex;
    align-items: center;

    .el-divider {
      height: 24px;
    }
  }

  .toolbar-right {
    display: flex;
    align-items: center;
  }

  .toolbar-right-search-input {
    width: 160px;
  }

  .toolbar-right-refresh {
    padding: 0 12px !important;
    margin-left: 8px;
  }

  .process-template-management-grid {
    .process-template-management-grid-name {
      cursor: pointer;
      color: var(--ty-ui-main-color);
    }

    .status-published,
    .status-underModification,
    .status-othersModifications {
      line-height: 18px;
      padding: 0 4px;
      border-radius: 4px;
      width: fit-content;
    }

    .status-published {
      background-color: #e2f7e0;
      color: #0e9411;
    }

    .status-underModification {
      background-color: #ebf6ff;
      color: #0073d1;
    }

    .status-othersModifications {
      background-color: #fff4e1;
      color: #f38f47;
    }

    .grid-column-visible {
      width: fit-content;
    }

    .grid-column-visible-icon {
      cursor: pointer;

      &:hover {
        color: var(--ty-ui-main-color);
      }
    }

    .grid-column-visible-disabled {
      color: var(--ty-ui-placeholder-color);
    }

    .grid-column-visible-disabled {
      color: var(--ty-ui-placeholder-color);
    }

    :deep(.all-grid-operate) {
      .vxe-cell {
        overflow: visible;
      }
    }
  }

  .process-template-management-pagination {
    margin-top: 6px;
  }

  .common-button {
    color: var(--ty-ui-main-color);

    &:hover {
      color: var(--ty-ui-main-hover-color);
    }
  }

  :deep(.vxe-table--render-default) {
    .vxe-body--column {
      padding-bottom: 0;
      padding-top: 0;
    }
  }
}
</style>
